<template>
	<view class="content">
		<image src="../../static/bg2.jpg" class="bg" mode="widthFix"></image>
		<view class="form">
			<view class="form_title">支持手机号、车架号中任意一种<br>不区分大小写</view>
			<view class="form_input"><input type="text" placeholder="请输入手机/车架号任意一种" v-model="keywords" placeholder-style="font-size: 14px" /></view>
			<view class="form_button"><button @click="search">查询</button></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keywords: ''
			}
		},
		onLoad() {

		},
		methods: {
			//发送给朋友
			onShareAppMessage() {
			  return {
				title: '膜兄弟质保查询',
				imageUrl: '../../static/banner1.jpg',
				path: '/pages/index/index'
			  }
			},		
			//分享到朋友圈
			onShareTimeline(res) { 
				return {
					title: "膜兄弟质保查询",
					imageUrl: '../../static/banner1.jpg',
				}
			},				
			search(){
				if(!this.keywords){
					uni.showToast({
						title: '请输入查询信息', 
						duration: 3000,
						"icon": "none"
					});	
					return false;
				}
				this.uni_request({
				  url: '/index.php/index/warranty/query',
				  method:"get",
				  data:{
					  'keywords':this.keywords,
				  },
				  // 其他请求参数...
				  success: (res) => {
				    //跳转成功页面(成功页里点击确定跳转到首页)
					uni.navigateTo({
						url: '/pages/index/results',
						  success: function(param) {
							// 通过eventChannel向被打开页面传送数据
							param.eventChannel.emit('acceptDataFromOpenerPage', res)
						  }					
					});

				  },
				});				

			}
		}
	}
</script>

<style>
	.content {
		background: #000;
		height: 100vh;
		padding: 20px;
		position: relative;
		box-sizing: border-box;
	}
	.form{position: absolute; bottom: 100upx; left: 0; width: 100%; padding: 0px 20px;box-sizing: border-box; z-index: 3;}
	.form .form_title{ font-size: 28upx; color: #fff; line-height: 1.5;}
	.form .form_input{ margin-top: 25upx; margin-bottom: 35upx;}
	.form .form_input input{ width: 100%; height: 80upx; font-size: 34upx; color: #fff; border: 1px solid rgba(255,255,255,.1); border-radius: 5px; padding: 0px 20upx;box-sizing: border-box;}
	.form .form_input .placeholder{ font-size: 34upx; }
	.form .form_button button{ width: 100%; height: 80upx; background: #d9001b; color: #fff; font-size: 34upx;}
	.bg{ position: absolute; left: 0; top: 40%; width: 100%; transform: translateY(-50%);}
	
</style>
